<template>
  <div v-if="user.admin && user.userId == 1 || isShow" class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
      <el-form-item label="总面积" prop="grossArea">
        <el-input
          v-model="queryParams.grossArea"
          clearable
          placeholder="请输入总面积"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="养殖种类" prop="culture">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.culture"-->
      <!--          placeholder="请输入养殖种类"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="采样面积" prop="samplingArea">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.samplingArea"-->
      <!--          placeholder="请输入采样面积"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="采样重量" prop="samplingWeight">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.samplingWeight"-->
      <!--          placeholder="请输入采样重量"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="样品数量" prop="sampleQuantity">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.sampleQuantity"-->
      <!--          placeholder="请输入样品数量"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="生物量" prop="biomass">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.biomass"-->
      <!--          placeholder="请输入生物量"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="单位面积资源量" prop="resourcesPerUnitArea">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.resourcesPerUnitArea"-->
      <!--          placeholder="请输入单位面积资源量"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="总资源量" prop="totalResources">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.totalResources"-->
      <!--          placeholder="请输入总资源量"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="价值" prop="value">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.value"-->
      <!--          placeholder="请输入价值"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-if="user.admin && user.userId == 1"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:information:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          v-if="user.admin && user.userId == 1"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:information:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          v-if="user.admin && user.userId == 1"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:information:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:information:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      <el-button
        type="warning"
        plain
        icon="el-icon-house"
        size="mini"
        @click="toHouse"
        v-if="user.userId != 1"
      >返回上一页
      </el-button>
    </el-row>

    <el-table v-loading="loading" :data="sheetList" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" label="行政区划" prop="city"/>
      <el-table-column align="center" label="网箱规模" prop="grossArea"/>
      <el-table-column align="center" label="水体类型" prop="waterTypeDesc"/>
      <el-table-column align="center" label="养殖种类" prop="cultureDesc"/>
      <el-table-column align="center" label="养殖方式" prop="cultureMethodDesc"/>
      <el-table-column align="center" label="养殖阶段" prop="cultureStageDesc"/>
      <el-table-column align="center" label="采样面积(㎡)" prop="samplingArea"/>
      <el-table-column align="center" label="采样重量(g)" prop="samplingWeight"/>
      <el-table-column align="center" label="样品数量(枚/头)" prop="sampleQuantity"/>
      <el-table-column align="center" label="单价类型(元/kg)" prop="unitPriceType"/>
      <el-table-column align="center" label="生物量(g/㎡)" prop="biomass"/>
      <el-table-column align="center" label="单位面积资源量(Kg/亩)" prop="resourcesPerUnitArea"/>
      <el-table-column align="center" label="总资源量(Kg)" prop="totalResources"/>
      <el-table-column align="center" label="价值(元)" prop="value"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['system:sheet:edit']"
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            v-hasPermi="['system:sheet:remove']"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />

    <!-- 添加或修改网箱育苗、养殖对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="800px" :center=true>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="账号类型:" prop="selectUserType">
              <el-select v-model="selectUserType" placeholder="请选择账号类型" disabled style="width: 150px">
                <el-option
                  v-for="item in userType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--              <el-col :span="12">-->
          <!--                <el-form-item label="底质类型" prop="geologicalType">-->
          <!--                  <el-select v-model="form.geologicalType" placeholder="请选择">-->
          <!--                    <el-option-->
          <!--                      v-for="item in geologicalTypeOptions"-->
          <!--                      :key="item.value"-->
          <!--                      :label="item.label"-->
          <!--                      :value="item.value"-->
          <!--                    >-->
          <!--                    </el-option>-->
          <!--                  </el-select>-->
          <!--                </el-form-item>-->
          <!--              </el-col>-->
          <el-col :span="12">
            <el-form-item label="行政区划" prop="city">
              <el-cascader
                ref="cascader"
                v-model="form.city"
                :options="cityOptions"
                @change="handleCityChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">

          <el-col :span="12">
            <el-form-item label="水体类型" prop="waterType">
              <el-select v-model="form.waterType" placeholder="请选择">
                <el-option
                  v-for="item in waterTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网箱规模" prop="grossArea">
              <el-input v-model="form.grossArea" placeholder="请输入网箱规模" style="width: 60%">
              </el-input>
              <el-select v-model="form.grossAreaOtionsSelect" style="width: 40%">
                <el-option
                  v-for="item in grossAreaOtions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item label="养殖种类" prop="culture">
          <el-tree :data="cultureData" :props="defaultProps" show-checkbox @check="handleNodeClick"
                   @node-click="handleNodeClick"
          ></el-tree>
          <el-input v-show="false" v-model="form.culture" placeholder="请输入养殖种类"/>
        </el-form-item>
        <el-row>
          <el-col :span=12>
            <el-form-item label="养殖方式" prop="cultureMethod">
              <el-select v-model="form.cultureMethod" @change="selectVlueToDesc('cultureMethodOptions')">
                <el-option
                  v-for="item in cultureMethodOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="养殖阶段" prop="cultureStage">
              <el-select v-model="form.cultureStage" @change="selectVlueToDesc('cultureStageOptions')">
                <el-option
                  v-for="item in cultureStageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="采样面积" prop="samplingArea">
          <el-input v-model="form.samplingArea" placeholder="请输入采样面积">
            <template slot="append">㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="采样重量" prop="samplingWeight">
          <el-input v-model="form.samplingWeight" placeholder="请输入采样重量">
            <template slot="append">g</template>
          </el-input>
        </el-form-item>
        <el-form-item label="样品数量" prop="sampleQuantity">
          <el-input v-model="form.sampleQuantity" placeholder="请输入样品数量" style="width: 80%"/>
          <el-select v-model="form.sampleQuantityUnit" style="width: 20%">
            <el-option
              v-for="item in sampleQuantityUnitOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单价类型" prop="unitPriceType">
          <el-select v-model="form.unitPriceType" placeholder="请选择单价类型">
            <el-option
              v-for="item in unitPriceTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="生物量" prop="biomass">-->
        <!--          <el-input v-model="form.biomass" placeholder="请输入生物量" >-->
        <!--            <template slot="append">g/㎡</template>-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="单位面积资源量" prop="resourcesPerUnitArea">-->
        <!--          <el-input v-model="form.resourcesPerUnitArea" placeholder="请输入单位面积资源量" >-->
        <!--            <template slot="append">Kg/亩</template>-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="总资源量" prop="totalResources">-->
        <!--          <el-input v-model="form.totalResources" placeholder="请输入总资源量" >-->
        <!--            <template slot="append">Kg</template>-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="价值" prop="value">-->
        <!--          <el-input v-model="form.value" placeholder="请输入价值" >-->
        <!--            <template slot="append">元</template>-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">评 估</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showCulture" append-to-body title="评估结果" width="600px" :center=true>
      <el-form ref="form" :model="form1" :rules="rules" label-width="80px">
        <el-form-item label="生物量" prop="biomass">
          <el-input v-model="form1.biomass" disabled placeholder="请输入生物量">
            <template slot="append">g/㎡</template>
          </el-input>
        </el-form-item>
        <el-form-item label="单位面积资源量" prop="resourcesPerUnitArea">
          <el-input v-model="form1.resourcesPerUnitArea" disabled placeholder="请输入单位面积资源量">
            <template slot="append">Kg/亩</template>
          </el-input>
        </el-form-item>
        <el-form-item label="总资源量" prop="totalResources">
          <el-input v-model="form1.totalResources" disabled placeholder="请输入总资源量">
            <template slot="append">Kg</template>
          </el-input>
        </el-form-item>
        <el-form-item label="价值" prop="value">
          <el-input v-model="form1.value" disabled placeholder="请输入价值">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormValue">保 存</el-button>
        <el-button @click="cancelValue">取 消</el-button>
      </div>
    </el-dialog>
  </div>
  <div v-else class="app-container">
    <div class="detail_info">
      <div
        class="clearfix"
        style="
          text-align: center;
          font-size: 50px;
          border-bottom: 2px dashed #333;
          padding-bottom: 30px;
        "
      >
        <span>网箱育苗、养殖技术经济资源信息共享系统</span>
      </div>
      <div style="display: flex; justify-content: center; aligh-items: center">
        <svg
          t="1742205146308"
          class="arrow-icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7144"
          width="100"
          height="100"
        >
          <path
            d="M765.44 566.3232l-199.1168 199.1168L512 819.712l-54.3232-54.272-199.1168-199.1168L312.8832 512 512 711.1168 711.1168 512l54.3232 54.3232zM765.44 258.56l-199.1168 199.1168L512 512 457.6768 457.6768 258.56 258.56l54.3232-54.272L512 403.4048l199.1168-199.1168 54.3232 54.272z"
            fill="#52b7ec"
            p-id="7145"
          ></path>
        </svg>
      </div>

      <div class="animation_fadein">
        <div class="group">
          <img  src="../../../../public/img/wangxiang2.png" />
          <div class="font_con">
            <img class="right" src="../../../../public/img/pin.png" alt="" />
            网箱育苗、养殖是一种将水生生物（如鱼类、贝类、甲壳类等）放在固定水域中的网箱内进行养殖的方式。网箱通常由浮力装置、框架和网衣组成，设置在水库、湖泊、河流或海洋等水域中。
          </div>
        </div>
        <div class="group">
          <div class="font_con">
            <img class="left" src="../../../../public/img/pin.png" alt="" />
            网箱为水产幼苗提供了相对稳定、安全的生长环境，减少了外界敌害生物的侵袭，有利于提高幼苗的成活率 ；集中在网箱中养殖，方便养殖人员进行日常的投饵、换水、疾病防治等管理工作，降低了劳动强度和管理成本；有利于开展规模化养殖：可以根据市场需求和养殖条件，合理规划网箱的数量和布局，实现水产育苗的规模化生产，提高养殖效益。
          </div>
          <img src="../../../../public/img/wangxiang1.png" />
        </div>
      </div>
      <el-row :gutter="24">
        <div class="fun_btn">
          <el-col :span="7">
            <button class="button-xinxi" @click="handleAdd">
              <span style="font-size: 25px; color: white">价值评估</span>
            </button>
          </el-col>
          <el-col :span="2">
            <button class="button-xinxi" @click="changeIsShow">
              <span style="font-size: 25px; color: white">信息共享</span>
            </button>
          </el-col>
        </div>
      </el-row>
    </div>


        <!-- 添加或修改网箱育苗、养殖对话框 -->
        <el-dialog :title="title" :visible.sync="open" append-to-body width="800px" :center=true>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="账号类型:" prop="selectUserType">
                  <el-select v-model="selectUserType" placeholder="请选择账号类型" disabled style="width: 150px">
                    <el-option
                      v-for="item in userType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!--              <el-col :span="12">-->
              <!--                <el-form-item label="底质类型" prop="geologicalType">-->
              <!--                  <el-select v-model="form.geologicalType" placeholder="请选择">-->
              <!--                    <el-option-->
              <!--                      v-for="item in geologicalTypeOptions"-->
              <!--                      :key="item.value"-->
              <!--                      :label="item.label"-->
              <!--                      :value="item.value"-->
              <!--                    >-->
              <!--                    </el-option>-->
              <!--                  </el-select>-->
              <!--                </el-form-item>-->
              <!--              </el-col>-->
              <el-col :span="12">
                <el-form-item label="行政区划" prop="city">
                  <el-cascader
                    ref="cascader"
                    v-model="form.city"
                    :options="cityOptions"
                    @change="handleCityChange"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">

              <el-col :span="12">
                <el-form-item label="水体类型" prop="waterType">
                  <el-select v-model="form.waterType" placeholder="请选择">
                    <el-option
                      v-for="item in waterTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="网箱规模" prop="grossArea">
                  <el-input v-model="form.grossArea" placeholder="请输入网箱规模" style="width: 60%">
                  </el-input>
                  <el-select v-model="form.grossAreaOtionsSelect" style="width: 40%">
                    <el-option
                      v-for="item in grossAreaOtions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>


            <el-form-item label="养殖种类" prop="culture">
              <el-tree :data="cultureData" :props="defaultProps" show-checkbox @check="handleNodeClick"
                       @node-click="handleNodeClick"
              ></el-tree>
              <el-input v-show="false" v-model="form.culture" placeholder="请输入养殖种类"/>
            </el-form-item>
            <el-row>
              <el-col :span=12>
                <el-form-item label="养殖方式" prop="cultureMethod">
                  <el-select v-model="form.cultureMethod" @change="selectVlueToDesc('cultureMethodOptions')">
                    <el-option
                      v-for="item in cultureMethodOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span=12>
                <el-form-item label="养殖阶段" prop="cultureStage">
                  <el-select v-model="form.cultureStage" @change="selectVlueToDesc('cultureStageOptions')">
                    <el-option
                      v-for="item in cultureStageOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="采样面积" prop="samplingArea">
              <el-input v-model="form.samplingArea" placeholder="请输入采样面积">
                <template slot="append">㎡</template>
              </el-input>
            </el-form-item>
            <el-form-item label="采样重量" prop="samplingWeight">
              <el-input v-model="form.samplingWeight" placeholder="请输入采样重量">
                <template slot="append">g</template>
              </el-input>
            </el-form-item>
            <el-form-item label="样品数量" prop="sampleQuantity">
              <el-input v-model="form.sampleQuantity" placeholder="请输入样品数量" style="width: 80%"/>
              <el-select v-model="form.sampleQuantityUnit" style="width: 20%">
                <el-option
                  v-for="item in sampleQuantityUnitOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单价类型" prop="unitPriceType">
              <el-select v-model="form.unitPriceType" placeholder="请选择单价类型">
                <el-option
                  v-for="item in unitPriceTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!--        <el-form-item label="生物量" prop="biomass">-->
            <!--          <el-input v-model="form.biomass" placeholder="请输入生物量" >-->
            <!--            <template slot="append">g/㎡</template>-->
            <!--          </el-input>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="单位面积资源量" prop="resourcesPerUnitArea">-->
            <!--          <el-input v-model="form.resourcesPerUnitArea" placeholder="请输入单位面积资源量" >-->
            <!--            <template slot="append">Kg/亩</template>-->
            <!--          </el-input>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="总资源量" prop="totalResources">-->
            <!--          <el-input v-model="form.totalResources" placeholder="请输入总资源量" >-->
            <!--            <template slot="append">Kg</template>-->
            <!--          </el-input>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="价值" prop="value">-->
            <!--          <el-input v-model="form.value" placeholder="请输入价值" >-->
            <!--            <template slot="append">元</template>-->
            <!--          </el-input>-->
            <!--        </el-form-item>-->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">评 估</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog :visible.sync="showCulture" append-to-body title="评估结果" width="600px" :center=true>
          <el-form ref="form" :model="form1" :rules="rules" label-width="80px">
            <el-form-item label="生物量" prop="biomass">
              <el-input v-model="form1.biomass" disabled placeholder="请输入生物量">
                <template slot="append">g/㎡</template>
              </el-input>
            </el-form-item>
            <el-form-item label="单位面积资源量" prop="resourcesPerUnitArea">
              <el-input v-model="form1.resourcesPerUnitArea" disabled placeholder="请输入单位面积资源量">
                <template slot="append">Kg/亩</template>
              </el-input>
            </el-form-item>
            <el-form-item label="总资源量" prop="totalResources">
              <el-input v-model="form1.totalResources" disabled placeholder="请输入总资源量">
                <template slot="append">Kg</template>
              </el-input>
            </el-form-item>
            <el-form-item label="价值" prop="value">
              <el-input v-model="form1.value" disabled placeholder="请输入价值">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormValue">保 存</el-button>
            <el-button @click="cancelValue">取 消</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { delInformation, getInformation, listInformation } from '@/api/system/netboxinformation'
import { listCulture } from '../../../api/system/culture'
import { addInformation, updateInformation } from '../../../api/system/netboxinformation'
import { getUserProfile } from '../../../api/system/user'
import { getChildrenLIst, getProvince } from '../../../api/system/config'

export default {
  name: 'Sheet',
  dicts: ['geological_type'],
  data() {
    return {
      selectUserType: '',
      userType: [{
        value: '2',
        label: '普通用户'
      }, {
        value: '1',
        label: '管理员'
      }],
      waterTypeOptions: [{
        value: '1',
        label: '海水'
      }, {
        value: '2',
        label: '淡水'
      }, {
        value: '3',
        label: '半咸水'
      }],
      city: '',
      cityOptions: [],
      grossAreaOtions: [{
        value: 1,
        label: '立方米'
      }, {
        value: 2,
        label: '平方米'
      }],
      sampleQuantityUnitOptions: [
        {
          value: 1,
          label: '枚'
        }, {
          value: 2,
          label: '头'
        }, {
          value: 3,
          label: '尾'
        }
      ],
      cultureMethodOptions: [
        {
          value: 1,
          label: '精养'
        }, {
          value: 2,
          label: '半精养'
        }, {
          value: 3,
          label: '粗养'
        }
      ],
      cultureStageOptions: [
        {
          value: 1,
          label: '苗种养殖'
        }, {
          value: 2,
          label: '亲鱼养殖'
        }, {
          value: 3,
          label: '商品鱼养殖'
        }
      ],
      user: {},
      showCulture: false,
      unitPriceTypeOptions: [],
      cultureData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      geologicalTypeOptions: [{
        value: 1,
        label: '泥沙'
      }, {
        value: 2,
        label: '礁石'
      }, {
        value: 3,
        label: '砂砾'
      }],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 网箱育苗、养殖表格数据
      sheetList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        geologicalType: null,
        grossArea: null,
        culture: null,
        samplingArea: null,
        samplingWeight: null,
        sampleQuantity: null,
        unitPriceType: null,
        biomass: null,
        resourcesPerUnitArea: null,
        totalResources: null,
        value: null
      },
      // 表单参数
      form: {},
      form1: {},
      // 表单校验
      rules: {},
      isShow: false
    }
  },
  created() {
    this.getUser()
    this.getList()
    this.getCultureList()
    this.getProvinceCity()
  },
  methods: {
    selectVlueToDesc(value, e) {
      let that = this
      if (value == 'cultureStageOptions') {
        this.cultureStageOptions.forEach(item => {
          if (item.value == that.form.cultureStage) {
            that.form.cultureStageDesc = item.label
          }
        })
      }
      if (value == 'cultureMethodOptions') {
        this.cultureMethodOptions.forEach(item => {
          if (item.value == that.form.cultureMethod) {
            that.form.cultureMethodDesc = item.label
          }
        })
      }
    },
    getCheckedNodes() {
      const checkedNodes = this.$refs.cascader.getCheckedNodes()
      this.form.cityCode = this.form.city
      this.form.city = checkedNodes[0].pathLabels
    },
    getProvinceCity() {
      getProvince().then(res => {
        this.cityOptions = res.data
      })
    },
    handleCityChange(value) {
    },
    toHouse() {
      this.isShow = false
    },
    changeIsShow() {
      this.isShow = true
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data
        if (this.user.admin && this.user.userId == 1) {
          this.selectUserType = '1'
        } else {
          this.selectUserType = '2'
        }
      })
    },
    handleNodeClick(data) {
      this.form.culture = data.id
      let wholesalePrice = {
        label: '批发价',
        value: data.wholesalePrice
      }
      let retailPrice = {
        label: '零售价',
        value: data.retailPrice
      }
      let threshingPrice = {
        label: '塘口价',
        value: data.threshingPrice
      }
      let ziquPrice = {
        label: '自取价',
        value: data.ziquPrice
      }
      let songhuoPrice = {
        label: '送货价',
        value: data.songhuoPrice
      }
      this.unitPriceTypeOptions = [wholesalePrice, retailPrice, threshingPrice,ziquPrice,songhuoPrice]
    },
    /** 查询养殖种类分类列表 */
    getCultureList() {
      this.loading = true
      let param = {
        parentId:'4' // 网箱育苗
      }
      listCulture(param).then(response => {
        this.cultureData = response.rows
      })
    },
    /** 查询网箱育苗、养殖列表 */
    getList() {
      this.loading = true
      let _that = this
      listInformation(this.queryParams).then(response => {
        this.sheetList = response.rows
        this.sheetList.forEach(item =>{
          let lable = ""
          let waterLable = ""
          _that.grossAreaOtions.forEach(one =>{
            if (item.grossAreaOtionsSelect == one.value){
              lable = one.label
            }
          })
          _that.waterTypeOptions.forEach(one =>{
            if (item.waterType == one.value){
              waterLable = one.label
            }
          })
          item.grossArea = item.grossArea + " " + lable
          item.waterTypeDesc = waterLable
          if (item.unitPriceType){
            item.unitPriceType = item.unitPriceType+" " + "元/kg"
          }
        })
        this.total = response.total
        this.loading = false
      })
    },
    cancelValue() {
      this.showCulture = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        geologicalType: null,
        grossArea: null,
        culture: null,
        samplingArea: null,
        samplingWeight: null,
        sampleQuantity: null,
        unitPriceType: null,
        biomass: null,
        resourcesPerUnitArea: null,
        totalResources: null,
        value: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '新增价值评估信息'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getSheet(id).then(response => {
        this.form = response.data
        if (response.data.cityCode) {
          this.form.city = response.data.cityCode.split('-')
        }
        this.open = true
        this.title = '修改价值评估信息'
      })
    },
    submitFormValue() {
      this.form.biomass = this.form1.biomass
      this.form.resourcesPerUnitArea = this.form1.resourcesPerUnitArea
      this.form.totalResources = this.form1.totalResources
      this.form.value = this.form1.value
      this.getCheckedNodes()
      if (this.form.city) {
        let newCityValue = ''
        let newCityCodeValue = ''
        this.form.city.forEach(item => {
          newCityValue = newCityValue == '' ? item : newCityValue + '-' + item
        })
        this.form.cityCode.forEach(item => {
          newCityCodeValue = newCityCodeValue == '' ? item : newCityCodeValue + '-' + item
        })
        this.form.city = newCityValue
        this.form.cityCode = newCityCodeValue
      }
      if (this.form.id != null) {
        updateInformation(this.form).then(response => {
          this.$modal.msgSuccess('修改成功')
          this.open = false
          this.showCulture = false
          this.getList()
        })
      } else {
        addInformation(this.form).then(response => {
          this.$modal.msgSuccess('新增成功')
          this.open = false
          this.showCulture = false
          this.getList()
        })
      }
    },
    /** 提交按钮 */
    submitForm() {
      let _that = this
      this.$refs['form'].validate(valid => {
        if (valid) {
          _that.showCulture = true
          _that.form1.biomass = (_that.form.samplingWeight / _that.form.samplingArea).toFixed(2)
          _that.form1.resourcesPerUnitArea = (_that.form1.biomass * 666.7 / 1000).toFixed(2)
          _that.form1.totalResources = (_that.form1.resourcesPerUnitArea * _that.form.grossArea).toFixed(2)
          _that.form1.value = (_that.form1.totalResources * _that.form.unitPriceType).toFixed(2)
          // if (this.form.id != null) {
          //   updateSheet(this.form).then(response => {
          //     this.$modal.msgSuccess("修改成功");
          //     this.open = false;
          //     this.getList();
          //   });
          // } else {
          //   addSheet(this.form).then(response => {
          //     this.$modal.msgSuccess("新增成功");
          //     this.open = false;
          //     this.getList();
          //   });
          // }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除网箱育苗、养殖编号为"' + ids + '"的数据项？').then(function() {
        return delInformation(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/sheet/export', {
        ...this.queryParams
      }, `sheet_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
<style lang='scss'>
.button-xinxi {
  width: 170px;
  height: 70px;
  background: #1989fa;
  border-radius: 15px;
  border: none;
}
.button-xinxi:hover {
  cursor: pointer;
  background: #3a93ec;
}
.detail_info {
  padding-bottom: 500px;
  background-image: radial-gradient(#e0f1ff, #fff);

  // background-color: #e0f1ff;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animation_fadein {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
  padding: 50px;
  text-align: left;
  img {
    width: 550px;
    margin: 50px 140px;
  }
  .font_con {
    padding: 50px;
    box-shadow: 7px 5px 13px #ddd;
    border-radius: 30px;
    width: 35%;
    font-size: 20px;
    position: relative;
    img {
      padding: 0;
      margin: 0;
      position: absolute;
      top: -10px;
      width: 40px;
    }
    .left {
      left: 40px
    }
    .right {
      right: 40px;
    }
  }
}
.group {
  display: flex;
  justify-content: center;
  align-items: center;
}
.animation_fadein > :nth-child(1) {
  transition-delay: 0s;
}

.animation_fadein > :nth-child(2) {
  transition-delay: 10s;
}
.fun_btn {
  margin: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrow-icon {
  animation: topToBottom 1.5s infinite;
}
@keyframes topToBottom {
  from {
    transform: translateY(-20%);
  }
  to {
    transform: translateY(20%);
  }
}
</style>

